<template>
    <div class="echartWrap">
        <div class="echarts" ref="echartsBar1" :style="{ minHeight: '100px', }">
        </div>
        <div class="title">{{ cardItem.titles }}</div>
        <div class="xTitle">{{ cardItem.xTitle }}</div>
        <div class="yTitle">月发起量{{ cardItem.yTitle }}</div>
        <div class="rightyTitle">日发起量{{ cardItem.yTitle }}</div>
    </div>
</template>

<script>
import { onResizeChang, markLineF } from '@/components/Echarts/js/common';

export default {
    name: 'barDoub',
    props: {
        // 类型
        type: {
            type: String,
            default: () => ''
        },
        /** 包含
         *  markLine：{
         *  label:'',// 名称
         *  value:'',// 固定值
         * }
         * 
        */
        // 一些配置项
        setting: {
            type: Object,
            default: () => { }
        },
        // 数据
        data: {
            type: [Object, Array],
            default: () => [],
        },
        cardItem: {
            type: Object,
        },
        // 数据
        extraData: {
            type: [Object, Array],
            default: () => [],
        },
    },
    data() {
        return {
            timesName: null
        }
    },
    created() {
        // 监听屏幕改变的话就调用
        onResizeChang('start', this.onResizeChange)
    },
    methods: {
        echartInit() {
            var myChart = this.$echarts.init(this.$refs.echartsBar1);

            let formatExtraData = this.extraData.map(v => Number(v.num));
            let maxNum = 10;
            let minNum = 0
            if (formatExtraData.length > 0) {
                maxNum = Math.max(...formatExtraData);
                minNum = Math.min(...formatExtraData);
                if (maxNum == minNum) {
                    maxNum += 2;
                    minNum = minNum < 2 ? 0 : minNum - 2
                } else {
                    maxNum += 1;
                    minNum = minNum < 1 ? 0 : minNum - 1;
                }
            }

            var option = {
                // 图例位置
                // tooltip: {
                //     formatter: function (params) {
                //         var color = params.color.colorStops[0].color;
                //         var res = `<div "><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span> ${params.name}日发起量<span style="color:#6ACEFA;margin-left:6px;">${params.value}个</span></div>`;
                //         return res;
                //     }
                // },
                tooltip: {
                    trigger: 'axis', // 鼠标悬停时显示提示框
                    axisPointer: { type: 'shadow' } // 阴影指示器
                },
                legend: {
                    data: ['月发起量', '日发起量'], // 图例名称，需与series.name对应
                    right: 30
                },
                // 图像大小
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '7%',
                    top: '5%',
                    containLabel: true
                },
                textStyle: {
                    color: "#ffffff"
                },
                xAxis:
                {
                    type: 'category',
                    data: this.getSplitData.label,
                    axisLabel: {
                        // color: '#C5C0BF',
                        color: '#000000',
                        fontSize: '10'
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '月发起量',
                        axisLabel: {
                            // color: '#C5C0BF',
                            color: '#000000',
                            fontSize: '8'
                        },
                    },
                    {
                        type: 'value',
                        name: '日发起量',
                        min: minNum,
                        max: maxNum,
                        interval: 1,
                        // axisLine: { lineStyle: { type: 'dashed' } },
                        axisLabel: {
                            // color: '#C5C0BF',
                            color: '#000000',
                            fontSize: '8',
                        },
                        splitLine: {
                            show: true, // 显示网格线
                            lineStyle: {
                                type: 'dashed', // 设置为虚线
                                color: '#ccc'   // 可选：调整虚线颜色
                            }
                        }

                    },
                ],
                series: [
                    {
                        name: '月发起量',
                        type: 'bar',
                        // 图形颜色
                        itemStyle: {
                            color: '#FD3967',
                            barBorderRadius: [50, 50, 50, 50],
                            color: {
                                type: 'linear',
                                x: 0, //右
                                y: 0, //下
                                x2: 0, //左
                                y2: 1, //上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#16D5FF',
                                        // color: '#FB7224' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#165DFF20',
                                        // color: '#165DFF00' // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        yAxisIndex: 0,
                        barMaxWidth: 12,
                        data: this.getSplitData.value,
                    },
                    {
                        name: '日发起量',
                        type: 'bar',
                        // 图形颜色
                        itemStyle: {
                            color: '#06F3F2',
                            barBorderRadius: [50, 50, 50, 50],
                            color: {
                                type: 'linear',
                                x: 0, //右
                                y: 0, //下
                                x2: 0, //左
                                y2: 1, //上
                                colorStops: [
                                    {
                                        offset: 0,
                                        // color: '#16D5FF',
                                        color: '#FB7224' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        // color: '#165DFF00',
                                        color: '#FB722420' // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        yAxisIndex: 1,
                        barMaxWidth: 12,
                        data: formatExtraData,
                    },
                ],

            };
            console.log('extraData==', this.extraData.map(v => Number(v.num)));

            myChart.setOption(option);
            myChart.resize();
        },
        // 重新计算
        onResizeChange() {
            this.$nextTick(() => {
                var myChart = this.$echarts.init(this.$refs.echartsBar1);
                myChart.resize();
            })
        },
        // 对堆叠数据的处理
        converStackData(val) {
            let arr = [];
            let obj = {};
            if (Array.isArray(val) && val.length > 0) {
                val.filter((v, i) => {
                    if (i === 0) {
                        obj = {
                            name: v.type,
                            type: 'bar',
                            stack: v.type,
                            data: [v.value],
                        }
                    } else if (obj.name === v.type) {
                        if (i === val.length - 1) {
                            obj.data.push(v.value);
                            arr.push(obj);
                            obj = {};
                        } else {
                            obj.data.push(v.value);
                        }
                    } else if (obj.name != v.type) {
                        arr.push(obj);
                        obj = {
                            name: v.type,
                            type: 'bar',
                            stack: arr[arr.length - 1].stack,
                            data: [v.value],
                        }
                    }
                })
            }
            arr = arr.map((vals, index) => {
                return {
                    ...vals,
                    itemStyle: {
                        ...vals.itemStyle,
                        color: itemStyleColor[index % itemStyleColor.length]
                    }
                }
            })
            return arr;
        },
    },
    mounted() {
        // 解决页面不聚焦的时候柱形图丢失问题
        this.echartInit();
        this.timesName = setInterval(() => {
            this.echartInit();
        }, 2000)
        console.log('extraData==');

    },
    watch: {
        data(newVal, oldVal) {
            // 当 parentData 变化时，这个函数会被调用
            this.echartInit();
        }
    },
    computed: {
        // data里面包含 label value
        getSplitData() {
            let arr = {
                label: [],
                value: [],
            };
            this.data.filter((val, index) => {
                arr['label'].push(val.label);
                arr['value'].push(val.value);
            })
            return arr
        },
    },
    // 销毁
    beforeDestroy() {
        onResizeChang('end', this.onResizeChange)
        clearInterval(this.timesName);
        this.timesName = null;
    }
}
</script>

<style lang="less" scoped>
.echartWrap {
    height: 100%;
    width: 100%;
    position: relative;

    .echarts {
        height: 100%;
        width: 100%;


    }

    .title {
        position: absolute;
        top: -8px;
        width: 100%;
        text-align: center;
        font-weight: 560;
        pointer-events: none;
    }

    .xTitle {
        position: absolute;
        bottom: 1%;
        width: 100%;
        text-align: center;
    }

    .yTitle {
        position: absolute;
        top: 40%;
        left: 1%;
        text-align: center;
        display: flex;
        height: 100%;
        writing-mode: vertical-rl;
        /* 将文本垂直排列，从右到左 */
        text-orientation: upright;
        /* 文本方向保持直立 */
    }

    .rightyTitle {
        position: absolute;
        top: 40%;
        right: 1%;
        text-align: center;
        display: flex;
        height: 100%;
        writing-mode: vertical-rl;
        /* 将文本垂直排列，从右到左 */
        text-orientation: upright;
        /* 文本方向保持直立 */
    }
}
</style>